/** @jsxImportSource react */

import { X } from 'lucide-react';
import type { SimpleTag } from '~/common/types';
import { Badge } from '~/components/react/shadcn/ui/badge';

type TagProps = {
  tag: SimpleTag;
  selected: boolean;
  onClick: (tag: SimpleTag) => void;
};

export default function Tag({ tag, selected, onClick }: TagProps) {
  return (
    <Badge
      variant={selected ? 'default' : 'outline'}
      className="text-md py-2 px-4 cursor-pointer"
      onClick={() => onClick({ id: tag.id, name: tag.name })}
    >
      {tag.name}
      {selected && (
        <>
          &nbsp;
          <X className="w-4 h-4" />
        </>
      )}
    </Badge>
  );
}
